<template>
  <div class="app-container">
    <div class="ranking-header">
      <el-radio-group v-model="period" @change="handleQuery">
        <el-radio-button label="day">今日榜</el-radio-button>
        <el-radio-button label="week">本周榜</el-radio-button>
        <el-radio-button label="month">本月榜</el-radio-button>
        <el-radio-button label="total">总榜</el-radio-button>
      </el-radio-group>
    </div>

    <el-table v-loading="loading" :data="rankingList">
      <el-table-column label="排名" width="80" align="center">
          <template slot-scope="scope">
              <span :class="['rank-badge', 'rank-' + (scope.$index + 1)]">{{ scope.$index + 1 }}</span>
          </template>
      </el-table-column>
      <el-table-column label="用户" align="left">
          <template slot-scope="scope">
              <div class="user-info">
                  <el-avatar :size="40" :src="scope.row.avatar"></el-avatar>
                  <span class="nickname">{{ scope.row.nickName }}</span>
              </div>
          </template>
      </el-table-column>
      <el-table-column label="总距离 (公里)" align="right">
          <template slot-scope="scope">
              <span class="distance">{{ (scope.row.totalDistance / 1000).toFixed(2) }} km</span>
          </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getRanking } from "@/api/iot/results";

export default {
    name: "Ranking",
    data() {
        return {
            loading: true,
            period: 'day', // 默认查询今日榜
            rankingList: []
        };
    },
    created() {
        this.handleQuery();
    },
    methods: {
        handleQuery() {
            this.loading = true;
            getRanking({ period: this.period }).then(response => {
                this.rankingList = response.data;
                this.loading = false;
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.ranking-header { margin-bottom: 20px; }
.user-info { display: flex; align-items: center; }
.nickname { margin-left: 10px; font-weight: bold; }
.distance { font-weight: bold; font-size: 16px; }
.rank-badge {
    display: inline-block; width: 24px; height: 24px;
    line-height: 24px; text-align: center;
    border-radius: 50%; color: #fff;
    background-color: #c0c4cc;
}
.rank-1 { background-color: #ffc107; }
.rank-2 { background-color: #c0c0c0; }
.rank-3 { background-color: #cd7f32; }
</style>
